<template>
  <div>
    <header>
      <van-nav-bar title="我的收货地址" left-text="返回" left-arrow @click-left="onClickLeft" />
    </header>
    <main>
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        @add="onAdd"
        @edit="onEdit"
        @select="onSelect"
      />
    </main>
  </div>
</template>

<script>
import * as api from "@/api/address";
export default {
  name: "Myaddress",
  data() {
    return {
      chosenAddressId: "1",
      list: []
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onAdd() {
      this.$router.push("/addAddress");
    },
 
    onEdit(item, index) {
      this.$router.push("/editAddress/" + item.id);
    },

    onSelect(item, index) {
      console.log(item.id);
      api.oneAddress(item.id).then(data => {
        console.log(data);
        this.$store.state.address = data.data;
      });
    }
  },
  mounted() {
    api.addressList().then(data => {
      console.log(data.data.addresses);
      let addresses = data.data.addresses;
      let newArr = [];
      addresses.map(v => {
        let obj = {
          id: v._id,
          name: v.receiver,
          tel: v.mobile,
          address: v.regions + v.address
        };
        newArr.push(obj);
      });
      this.list = newArr;
    });
  }
};
</script>

<style scoped>
header {
  height: 44px;
}
main {
  padding: 20px 10px;
}
main >>> .van-address-item .van-radio__icon--checked .van-icon {
  margin-right: 10px;
}
main >>> .van-radio__icon .van-icon {
  margin-right: 10px;
}
</style>